<ui:component  xmlns:c="http://java.sun.com/jsp/jstl/core"
               xmlns:h="http://java.sun.com/jsf/html"
               xmlns:p="http://primefaces.org/ui"
               xmlns:ui="http://java.sun.com/jsf/facelets"
               xmlns:f="http://java.sun.com/jsf/core">
    <c:if test="#{!sesion.activa}">
        <!--#{!sesion.comprobar()}-->
    </c:if>
    <c:if test="#{!pCVehiculo.consultarPermisos().ver}">
        <h:panelGroup layout="block" styleClass="divsinpermisos">
            <p:outputLabel value="No tiene permisos suficientes para ver esta página"/>
        </h:panelGroup>
    </c:if>
    <c:if test="#{pCVehiculo.consultarPermisos().ver}">
        <ui:param name="nombreparam" value="vehiculo" />
        <ui:param name="duracionparam" value="7000" />
        <ui:param name="efectshowparam" value="fade" />
        <ui:param name="efecthideparam" value="fade" />

        <h:panelGroup layout="block" id="divTabla#{nombreparam}" styleClass="delistar-js" >
            <h:form id="formTabla#{nombreparam}">
                <p:growl id="growldel#{nombreparam}" widgetVar="wvgrowldel#{nombreparam}"
                         autoUpdate="false" showDetail="false" life="#{duracionparam}" /> 
                
                <p:dataTable  var="item"
                              value="#{pCVehiculo.listado}"
                              rows="10"
                              paginator="true"
                              paginatorTemplate="Página: {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                              lazy="true" 
                              resizableColumns="true"
                              paginatorAlwaysVisible="false"
                              emptyMessage="No hay #{lenguajeBean.devolverStringPlural(nombreparam)} que mostrar."
                              id="tableModel#{nombreparam}" styleClass="tablaInterna" > 
                    <f:facet name="header">                        
                        <p:toolbar id="tbx#{nombreparam}" style="margin-top: 4px; margin-bottom: 4px;">
                            <p:toolbarGroup align="left">
                                <p:commandLink value="Para crear un vehículo nuevo haga click aquí." 
                                               actionListener="#{pCVehiculo.reinicializarTemporal()}"
                                               process="@this"
                                               update=":formdata#{nombreparam}:dlgdata#{nombreparam}"
                                               oncomplete="wvdlgdata#{nombreparam}.show();"
                                               title="Crear #{lenguajeBean.devolverString(nombreparam)}"
                                               rendered="#{pCVehiculo.consultarPermisos().alta}">

                                </p:commandLink>
                            </p:toolbarGroup>      
                            <p:separator rendered="#{pCVehiculo.consultarPermisos().alta}"/>
                            <p:toolbarGroup>
                                <h:outputText styleClass="titulos" value="Listado de #{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}"
                                              style="font-size: 18px;" rendered="#{sesion.mostrarTituloTabla}"/>

                                <p:selectCheckboxMenu styleClass="comboSeleccion" value="#{pCVehiculo.selectedChecksVisible}" label="Elegir columnas" panelStyle="width:220px"
                                                      panelStyleClass="saraza" >  
                                    <f:selectItems value="#{pCVehiculo.checksVisible}"/>
                                    <p:ajax event="change" listener="#{pCVehiculo.setearVisibles()}" process="@this"
                                            update=":formTabla#{nombreparam}"/>
                                </p:selectCheckboxMenu>  

                            </p:toolbarGroup>
                        </p:toolbar>

                    </f:facet>
                    <p:column headerText="Id" sortBy="#{item.id}" filterBy="#{item.id}" 
                              rendered="#{pCVehiculo.getColVisible('id')}">
                        <h:outputText value="#{item.id}" />
                    </p:column>
                    <p:column headerText="Matrícula" sortBy="#{item.matricula}" filterBy="#{item.matricula}" 
                              rendered="#{pCVehiculo.getColVisible('matricula')}" >
                        <h:outputText value="#{item.matricula}"/>
                    </p:column>
                    <p:column headerText="Descripción" sortBy="#{item.descripcion}" filterBy="#{item.descripcion}"
                              rendered="#{pCVehiculo.getColVisible('descripcion')}" >
                        <h:outputText value="#{item.descripcion}"/>
                    </p:column>

                    <p:column width="74" exportable="false">
                        <f:facet name="header">
                            <p:column headerText="">
                                <p:commandLink actionListener="#{pCVehiculo.reinicializarTemporal()}"
                                               process="@this"
                                               update=":formdata#{nombreparam}:dlgdata#{nombreparam}"
                                               oncomplete="wvdlgdata#{nombreparam}.show();"
                                               title="Crear #{lenguajeBean.devolverString(nombreparam)}"
                                               rendered="#{pCVehiculo.consultarPermisos().alta}" styleClass="agregarIco">
                                    <h:graphicImage library="theme/images" name="agregar_.png" alt="Agregar un elemento" height="48" width="48" style="margin-left:8px" />
                                </p:commandLink>
                            </p:column>
                        </f:facet>

                        <p:commandLink 
                            actionListener="#{pCVehiculo.establecerTemporal(item, true)}"
                            process="@this" title="Modificar #{lenguajeBean.devolverString(nombreparam)}" 
                            update=":formdata#{nombreparam}:dlgdata#{nombreparam}"
                            oncomplete="wvdlgdata#{nombreparam}.show();"
                            style="margin-right: 5px;"
                            disabled="#{!pCVehiculo.consultarPermisos().modificacion}"  styleClass="imagenIcono">
                            <h:graphicImage library="theme/images" name="editar_ico.png" alt="Modificar un elemento" />
                        </p:commandLink>
                        <p:commandLink 
                            actionListener="#{pCVehiculo.establecerTemporal(item, false)}"
                            process="@this"
                            style="margin-right: 2px;"
                            oncomplete="wvconfe#{nombreparam}.show();"
                            title="Eliminar #{lenguajeBean.devolverString(nombreparam)}"
                            disabled="#{!pCVehiculo.consultarPermisos().baja}"  styleClass="imagenIcono">
                            <h:graphicImage library="theme/images" name="eliminar_ico.png" alt="Eliminar un elemento"/>
                        </p:commandLink>

                        <p:confirmDialog id="confe#{nombreparam}" widgetVar="wvconfe#{nombreparam}"
                                         header="Confirmar eliminación de #{lenguajeBean.devolverStringPlural(nombreparam)}" 
                                         closeOnEscape="true" closable="true" showEffect="#{efectshowparam}" hideEffect="#{efecthideparam}"
                                         message="¿Seguro que desea eliminar permanentemente el elemento seleccionado?">
                            <p:commandButton value="Si" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" 
                                             actionListener="#{pCVehiculo.eliminar()}"
                                             update="tableModel#{nombreparam} :formTabla#{nombreparam}:tableModel#{nombreparam}:tbx#{nombreparam} :formTabla#{nombreparam}:growldel#{nombreparam}"
                                             onclick="wvconfe#{nombreparam}.hide();" style="float: right;"/>  
                            <p:commandButton value="No" styleClass="ui-confirmdialog-no" 
                                             icon="ui-icon-close" onclick="wvconfe#{nombreparam}.hide();"
                                             style="float: right;"/>
                        </p:confirmDialog>
                    </p:column>

                </p:dataTable>
                <p:panel header="Exportar datos de la tabla" styleClass="exportar-datos">  
                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="excel.png" alt="Excel" />  
                        <p:dataExporter type="xls" encoding="iso-8859-1" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="pdf.png" alt="PDF" />  
                        <p:dataExporter type="pdf" encoding="iso-8859-1" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}"/>  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="csv.png" alt="CSV" />    
                        <p:dataExporter type="csv" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="xml.png" alt="XML" />  
                        <p:dataExporter type="xml" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  
                </p:panel>  
            </h:form>

            <h:form id="formdata#{nombreparam}">
                <p:growl id="growldata#{nombreparam}" widgetVar="wvgrowldata#{nombreparam}"
                         autoUpdate="false" showDetail="false" life="#{duracionparam}" /> 
                <p:dialog modal="true" dynamic="true" resizable="false" closable="false" width="460px"
                          widgetVar="wvdlgdata#{nombreparam}" id="dlgdata#{nombreparam}"
                          header="#{pCVehiculo.devolverTituloDlg()} #{lenguajeBean.devolverString(nombreparam)}"
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}">

                    <h:panelGroup id="paneldialogodata#{nombreparam}" layout="block" 
                                  style="overflow: auto; display: block;">
                        <ui:include src="dialogoVehiculo.xhtml"/>
                        <h:panelGroup layout="block" style="overflow: auto; display: inline-block;height:50px; width: 100%">
                            <p:commandButton value="Guardar" actionListener="#{pCVehiculo.guardar(nombreparam)}"
                                             style="float: left;margin-top: 0px!important;margin-left: 110px;"  async="false"
                                             update=":formTabla#{nombreparam}:tableModel#{nombreparam} growldata#{nombreparam} paneldialogogriddata#{nombreparam}"
                                             id="btndata#{nombreparam}" widgetVar="wvbtndata#{nombreparam}" rendered="#{!pCVehiculo.esVer()}"
                                             oncomplete="handle#{nombreparam}datarequest(xhr, status, args);"
                                             styleClass="btn-aceptar">
                                <p:resetInput target="paneldialogogriddata#{nombreparam}"/>
                            </p:commandButton>
                            <p:commandButton value="#{pCVehiculo.devolverTxtBtnCancelarDlg()}" actionListener="#{pCVehiculo.reinicializarTemporal()}"
                                             oncomplete="wvdlgdata#{nombreparam}.hide();"
                                             style="margin-top: 15px;" styleClass="btn-cancelar"
                                             process="@this" update="paneldialogogriddata#{nombreparam}">
                                <p:resetInput target="paneldialogogriddata#{nombreparam}"/>
                            </p:commandButton>

                        </h:panelGroup>
                        <p:commandLink value="#{pCVehiculo.devolverTxtLimpiarFormDlg()}" update="paneldialogogriddata#{nombreparam}"
                                       process="@this" rendered="#{!pCVehiculo.esVer()}">
                            <p:resetInput target="paneldialogogriddata#{nombreparam}"/>
                        </p:commandLink>
                    </h:panelGroup>
                </p:dialog>
            </h:form>

            <p:dialog maximizable="false" minimizable="false" modal="true" id="dlgespera#{nombreparam}"
                      widgetVar="wvdlgespera#{nombreparam}">
                <p:progressBar widgetVar="pbAjax" ajax="true" value="100" labelTemplate="{value}%" styleClass="animated"/>
            </p:dialog>
        </h:panelGroup>
        <h:outputScript>
            function handle#{nombreparam}datarequest(xhr, status, args) {if (args.validationFailed || !args.correcto) {} else {wvdlgdata#{nombreparam}.hide();}}
        </h:outputScript>
    </c:if>
</ui:component>